<template>
	
	<div>
	 <div class="header">
	      <div class="aa">
	        <span class="left">知</span>
	        <b><span class="bb">充电桩运营管理</span></b>
	      </div>
		 <div class="custom-right-box">
		   <!-- 原来的内容 -->
		   <i @click="xuan1" class="el-icon-s-platform"></i>
		   <i class="el-icon-message"></i>
		   <i class="el-icon-switch-button"></i>
		  <div class="img">
			 
		  </div>
		 </div>
		  
	    </div>
		<el-menu default-active="1-4-1" class="el-menu-vertical-demo" 
			>
			 <el-menu-item index="1">
			    <i class="el-icon-s-home"></i>
			    <span slot="title">首页</span>
			  </el-menu-item>
		
			<el-submenu index="2">
				<template slot="title">
					<i class="el-icon-camera-solid"></i>
					<span slot="title">实时监控</span>
				</template>
					<el-menu-item index="2-1"  @click="xuan1">选项1</el-menu-item>
					<el-menu-item index="2-2" @click="() => {this.$router.push('/charge')}">实时监控</el-menu-item>
					<el-menu-item index="2-3" @click="() => {this.$router.push('/chargingShow')}">充电桩管理</el-menu-item>
					<el-menu-item index="2-4">选项1</el-menu-item>
			</el-submenu>
			
			<el-submenu index="3">
				<template slot="title">
					<i class="el-icon-s-unfold"></i>
					<span slot="title">站桩管理</span>
				</template>
					<el-menu-item index="3-1"  @click="xuan1">选项1</el-menu-item>
					<el-menu-item index="3-2" >选项2</el-menu-item>
					<el-menu-item index="3-3">选项3</el-menu-item>
					<el-menu-item index="3-4">选项1</el-menu-item>
			</el-submenu>
			<el-submenu index="4">
				<template slot="title">
					<i class="el-icon-s-marketing"></i>
					<span slot="title">运营管理</span>
				</template>
					<el-menu-item index="4-1"  @click="xuan1">选项1</el-menu-item>
					<el-menu-item index="4-2" >选项2</el-menu-item>
					<el-menu-item index="4-3">选项3</el-menu-item>
					<el-menu-item index="4-4">选项1</el-menu-item>
			</el-submenu>
			<el-submenu index="5">
				<template slot="title">
					<i class="el-icon-document"></i>
					<span slot="title">订单管理</span>
				</template>
					<el-menu-item index="5-1"  @click="record">充电记录</el-menu-item>
					<el-menu-item index="5-2"  @click="ledgr">交易流水</el-menu-item>
					<el-menu-item index="5-3"  @click="recharge">充值记录</el-menu-item>
					<el-menu-item index="5-4"  @click="forward">结转记录</el-menu-item>
			</el-submenu>
			<el-submenu index="6">
				<template slot="title">
					<i class="el-icon-warning"></i>
					<span slot="title">报警管理</span>
				</template>
					<el-menu-item index="6-1"  @click="alarmsettings">报警设置</el-menu-item>
					<el-menu-item index="6-2"  @click="alarmmessage" >报警消息</el-menu-item>
					
			</el-submenu>
			<el-submenu index="7">
				<template slot="title">
					<i class="el-icon-s-tools"></i>
					<span slot="title">运维管理</span>
				</template>
					<el-menu-item index="7-1" @click="renwu()">任务管理</el-menu-item>
					<el-menu-item index="7-2" @click="people()">运维人员</el-menu-item>
					
			</el-submenu>
			<el-submenu index="8">
				<template slot="title">
					<i class="el-icon-s-data"></i>
					<span slot="title">分析报表</span>
				</template>
					<el-menu-item index="8-1"  @click="xuan1">选项1</el-menu-item>
					<el-menu-item index="8-2" >选项2</el-menu-item>
					<el-menu-item index="8-3">选项3</el-menu-item>
					<el-menu-item index="8-4">选项1</el-menu-item>
			</el-submenu>
			<el-submenu index="9">
				<template slot="title">
					<i class="el-icon-s-operation"></i>
					<span slot="title">系统管理</span>
				</template>
					<el-menu-item index="9-1" @click="dept">部门模块</el-menu-item>
					<el-menu-item index="9-2" @click="role" >角色模块</el-menu-item>
					<el-menu-item index="9-3" @click="user">用户模块</el-menu-item>
			</el-submenu>
			
		</el-menu>
	</div>
</template>

<script>
	import {getUserList} from "@/api/home/Home"; // 确保此路径正确

	export default {
		data() {
		      return {
		        isCollapse: false
		      };
		    },
		name: "UserListComponent", // 更改了组件名称以更好地反映其功能
		methods: {
			renwu(){
				this.$router.push({
					path: '/task'
				})
			},
			people(){
				this.$router.push({
					path: '/people'
				})
			},
			ledgr() {
				this.$router.push({
					path: '/ledgr'
				})
			},
			forward() {
				this.$router.push({
					path: '/forward'
				})
			},
			record() {
				this.$router.push({
					path: '/record'
				})
			},
			recharge() {
				this.$router.push({
					path: '/recharge'
				
				})
			},
			
			xuan1() {
				this.$router.push({
					path: '/xuan1'
				})

			},
			alarmsettings() {
				this.$router.push({
					path: '/alarmsettings'
				})
			},
			alarmmessage() {
				this.$router.push({
					path: '/alarmmessage'
				})
			},
			
		
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},

			handleClose(key, keyPath) {
				console.log(key, keyPath);

			},
			dept() {
				this.$router.push({
					path: '/dept'
				})
			},
			role() {
				this.$router.push({
					path: '/role'
				})
			},
			user() {
				this.$router.push({
					path: '/user'
				})
			},
		
		}
	}
	
</script>
<style>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
	}
	.header {
	  background-color: royalblue;
	  width: 98%;
	  height: 80px;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding: 0 30px; /* 调整左右内边距 */
	}
	
	.left {
	  font-size: 24px; /* 字体大小 */
	  color: royalblue; /* 文字颜色 */
	  background-color: white; /* 背景颜色 */
	  padding: 5px 10px; /* 内边距 */
	  border-radius: 50px; /* 圆角 */
	  margin-right: 10px; /* 右边距 */
	  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
	}
	
	.aa {
	  display: flex;
	  align-items: center;
	  height: 100%;
	}
	
	.bb {
	  font-size: 20px;
	  color: white;
	}
	
	.custom-right-box {
	  width: 200px;
	  height: 80px;
	  /* background-color: skyblue; */
	  text-align: center;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  gap: 20px; /* 图标之间的间距 */
	  position: relative;
	  
	}
	
	/* 添加圆角和阴影效果 */
	.custom-right-box::before {
	  content: "";
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  border-radius: 50px;
	  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	  z-index: -1;
	}
	
	/* 将背景颜色改为图片中的蓝色 */
	.custom-right-box .el-icon-s-platform,
	.custom-right-box .el-icon-message,
	.custom-right-box .el-icon-switch-button {
	  color: white;
	  cursor: pointer; /* 鼠标悬停时变成手形 */
	}
	.img{
		width: 50px;
		height: 50px;
		background-color: wheat;
	}
	
	
</style>